<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>石头剪刀布游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="game-header">
            <h1>石头剪刀布游戏</h1>
            <div class="score-board">
                <div class="player-score">
                    <span class="score-label">玩家得分</span>
                    <span id="player-score" class="score">0</span>
                </div>
                <div class="computer-score">
                    <span class="score-label">电脑得分</span>
                    <span id="computer-score" class="score">0</span>
                </div>
            </div>
        </header>

        <main class="game-main">
            <div class="game-area">
                <div class="choices">
                    <div class="player-choice">
                        <h3>你的选择</h3>
                        <div id="player-selection" class="selection-display">
                            <span class="placeholder">等待选择</span>
                        </div>
                    </div>
                    <div class="computer-choice">
                        <h3>电脑选择</h3>
                        <div id="computer-selection" class="selection-display">
                            <span class="placeholder">?</span>
                        </div>
                    </div>
                </div>

                <div id="result" class="game-result">
                    <p>选择一个选项开始游戏</p>
                </div>

                <div class="action-buttons">
                    <button data-choice="rock" class="choice-btn">
                        <span class="btn-icon">✊</span>
                        <span class="btn-text">石头</span>
                    </button>
                    <button data-choice="paper" class="choice-btn">
                        <span class="btn-icon">✋</span>
                        <span class="btn-text">剪刀</span>
                    </button>
                    <button data-choice="scissors" class="choice-btn">
                        <span class="btn-icon">✌️</span>
                        <span class="btn-text">布</span>
                    </button>
                </div>
            </div>

            <div class="stats-history">
                <div class="game-stats">
                    <h3>游戏统计</h3>
                    <div class="stat-item">
                        <span class="stat-label">总游戏局数:</span>
                        <span id="total-games" class="stat-value">0</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">胜率:</span>
                        <span id="win-rate" class="stat-value">0%</span>
                    </div>
                    <button id="reset-game" class="control-btn">重置游戏</button>
                </div>

                <div class="game-history">
                    <h3>游戏历史</h3>
                    <div id="history-list" class="history-list">
                        <p class="no-history">暂无游戏记录</p>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="script.js"></script>
</body>
</html>